<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
</body>
<script>
  const vnode = {
    type: 'div',
    props: {
      id:"layer1",
      onClick:() => alert("hello")
    },
    children: "click me"
  }

  function renderer(vnode, container){
    // 使用vnode.type创建标签元素
    const el = document.createElement(vnode.type);

    // for in遍历vnode.props,将属性和事件挂载到DOM元素上
    for(let key in vnode.props){
      // 约定以on开头就是事件
      if(/^on/.test(key)){
        el.addEventListener(key.slice(2).toLowerCase(), vnode.props[key]);
      }else{
        el.setAttribute(key, vnode.props[key]);
      }
    }

    // 简单挂载children
    if(typeof vnode.children === 'string'){
      // 如果子节点是字符串，说明是文本节点，直接挂载
      el.appendChild(document.createTextNode(vnode.children));
    }
    else if(Array.isArray(vnode.children)){
      // 如果子节点是数组，说明是多个子节点，递归挂载
      vnode.children.forEach(child => {
        // 递归渲染字节点
        renderer(child, el);
      });
    }
    container.appendChild(el);
  }

  renderer(vnode, document.getElementById('app'));
</script>
</html>